<template>
  <div @click="clickList">mock</div>
  <el-button type="primary" @click="exportExcel('数据列表')">导出Excel</el-button>
  <el-button type="primary" @click="exportdoc('数据文档')">导出word</el-button>
  <div class="w-full flex gap-88">
    <el-table id="educe-table" :data="list" style="width: 100%">
      <el-table-column type="selection" width="55" />
      <el-table-column label="job">
        <template #default="scope">{{ scope.row.job }}</template>
      </el-table-column>
      <el-table-column property="age" label="age" />
      <el-table-column property="weight" label="weight" />
      <el-table-column property="height" label="height" />
      <el-table-column property="idcard" label="idcard" width="180" />
      <el-table-column property="createTime" label="tooltip" width="160" show-overflow-tooltip />
      <el-table-column property="sex" label="sex" />
    </el-table>


    <el-table id="wordBox" :data="list" style="width: 100%">
      <el-table-column type="selection" width="55" />
      <el-table-column label="job">
        <template #default="scope">{{ scope.row.job }}</template>
      </el-table-column>
      <el-table-column property="age" label="age" />
      <el-table-column property="weight" label="weight" />
      <el-table-column property="height" label="height" />
      <el-table-column property="idcard" label="idcard" width="180" />
      <el-table-column property="createTime" label="tooltip" width="160" show-overflow-tooltip />
      <el-table-column property="sex" label="sex" />
    </el-table>
  </div>

</template>


<script setup lang="ts">

import {
  ref,
} from 'vue'
import { getList } from '@/api/list/index.ts'
import { ElMessage } from "element-plus";
import axios from 'axios';
import * as XLSX from "xlsx"; //用于生成工作薄对象和转换位二进制字符串
import FileSaver from "file-saver"; //将二进制字符串转成excel文件并保存
import exportWord from 'html-doc-js'

let list = ref([])
const clickList = async () => {
  // try {
  //   const res = await axios.post('/mock/api/user/info')
  //   console.log(res, 'mock1');
  //   if (res.data.code == 200) {
  //     list.value = res.data.data

  //     ElMessage({
  //       type: "success",
  //       message: res.data.message,
  //     })
  //   }
  // } catch (error) {
  //   ElMessage({
  //     type: "error",
  //     message: '获取失败',
  //   })
  // }


  try {
    const res = await getList()
    if (res.code == 200) {
      list.value = res.data
      console.log(res, 'mock2');

      ElMessage({
        type: "success",
        message: res.message,
      })
    }
  } catch (error) {
    ElMessage({
      type: "error",
      message: '获取失败',
    })
  }

}

// 导出word
const exportdoc = (fileName: string) => {
  // 配置项以及实现下载方法
  const wrap = document.getElementById('wordBox') //获取dom对象
  //console.log(wrap, 'wrap');
  const config = {
    document: document, //默认当前文档的document 导出内容是iframe内部时需要使用iframe的document（getElementById('#iframe').contentDocument），注意iframe同域
    addStyle: true, // 是否导出样式，默认为true，此操作会将所有样式转换成行内样式导出
    fileName: fileName, // 导出文件名（不需要后缀） 存在文件名则会直接下载 否则会仅在success中返回blob
    toImg: ['canvas', 'mjx-math'], // 页面哪些部分需要转化成图片，例如echart图表之类
    success(blob, dom) { } // 完成之后回调， blob及完整处理后dom
  }
  exportWord(wrap, config)
}

//导出Excel
const exportExcel = (fileName: string) => {
  // 生成Excel工作簿对象
  var wb = XLSX.utils.table_to_book(document.querySelector("#educe-table"));
  // 获取二进制字符串作为输出
  var wbout = XLSX.write(wb, {
    bookType: "xlsx", //导出文件格式,默认xlsx
    book: true, // 是否创建一个新的工作薄对象，true创建新的工作薄对象，false则使用现有工作薄
    type: "array", //导出数据格式，binary,string,buffer,uin8arrary,array,默认binary
    cellStyles: [ //指定单元格样式
      { font: { bold: true } },  // 设置字体为粗体
      { fill: { patternType: "solid", fgColor: { rgb: "FFFF0000" } } },  // 设置单元格背景色为红色
      { alignment: { horizontal: "center", vertical: "middle" } },  // 设置单元格文字水平和垂直居中
      { border: { top: { style: "thin", color: { rgb: "FF000000" } }, bottom: { style: "none" } } },  // 设置边框样式
      { numFmt: { formatCode: "0.00" } },  // 设置数字格式
      { protection: { locked: true } }  // 设置单元格保护
    ],
    WTF: false //会在控制台调试信息
  });
  try {
    FileSaver.saveAs(
      new Blob(
        [wbout],  //包含要合并为Blob对象内容的数据的数组或数组缓冲区序列，若实施未提供该参数，则初始Blob对象为空。
        { type: "appliction/octet-stream" } //指定那种MIME类型表示Blod对象的内容
      ), // Blob: 对象表示一个不可变 原始数据的类文件对象,不一定是JS原生格式的数据。
      `${fileName}.xlsx`  // File: 基于Blob，继承了blob的功能并将其扩展使其支持用户系统上的文件。
    );
  } catch (e) {
    //出错了，打印值
    if (typeof console != "undefined") console.log(e, wbout);
  }
  // 返回一个新创建的Blob对象，其内容由参数中给定的数组串联组成。
  return wbout;
}
</script>


<style lang="scss" scoped></style>